<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单界面</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
</head>
<body onload="loadPage()">
<div class="container">
    <div class="panel panel-info text-center" style="margin-top: 50px;">
        <div class="panel-heading" style="letter-spacing:30px;">
            <h3 id="title">已出账单页面</h3>
        </div>
        <div class="panel-body">

            <table class="table table-condensed table-responsive table-hover text-left">
                <thead class="tab-header-background">
                <tr>
                    <th scope="col" colspan="4" style="text-align: center;font-size: 18px;font-weight: bold">本月账单</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row" style="width: 25%;">#</th>
                    <th scope="row" style="width: 25%;">服务名称</th>
                    <th scope="row" style="width: 25%;">查询结果</th>
                    <th scope="row" style="width: 25%;">备注</th>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>账单月份</td>
                    <td>
                        <select class="form-control" id="billCreate">
                            <option th:each="bill:${allBill}" th:text="${bill.billCreate}" ></option>
                        </select>
                    </td>
                    <td>根据账单月份查询</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>应还总额</td>
                    <td id="sumBill" th:text="${sumBill}">
                    </td>
                    <input id="billType" type="hidden" th:value="${thisBill.billType}">
                    <td>当月账单应还总额</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>最低还款额</td>
                    <td id="minBill" th:text="${minBill}"></td>
                    <td>当月应还金额的最低还款额</td>
                </tr>
                <tr>
                    <th scope="row">4</th>
                    <td>账单分期</td>
                    <td id="billStage">
                        <a th:href="@{/installment/selectInstallment(billId=${thisBill.billId})}">账单分期</a>
                    </td>
                    <td>跳转至分期界面</td>
                </tr>
                <tr>
                    <th scope="row">5</th>
                    <td>快速还款 <input type="hidden"  id="billid"  ></td>
                    <td id="billRepay">
                        <a th:href="@{/repayment/repayment(billid=${thisBill.billId})}">快速还款</a>
                    </td>

                    <td>还款于当月消费</td>
                </tr>
                </tbody>
            </table>
            <div class="panel-footer text-right">
                八仙过海项目组版权所有
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function loadPage() {
        $("#sumBill").text(milliFormat( $("#sumBill").text()));
        $("#minBill").text(milliFormat(parseFloat($("#minBill").text()).toFixed(2)));
        var sumBill = $("#sumBill").text();
        var billCreate = "";
        billCreate = $("#billCreate").val();
        console.log(billCreate)
        if (billCreate == "未出账单"){
            $("#title").text("未出账单页面");
        }
        if(sumBill == 0){
            $("#billStage").text("本月无消费，无需分期");
            $("#billRepay").text("本月无消费，无需还款");
        }
        var type = $("#billType").val();
        if (type != "待操作"){
            $("#billStage").text("账单已结算，无需分期");
            $("#billRepay").text("账单已结算，无需还款");
        }
    }

    $("#billCreate").change(function () {
        var billCreate = $("#billCreate").val();
        $.ajax({
            url:"/bill/selectBill?billCreate="+billCreate,
            success:function (data) {
                //alert(data.data)
                //console.log(data.data);
                //console.log((data.data.billStage+data.data.billAmount)/10)
                var sumBill = "";
                $("#sumBill").text(milliFormat((data.data.billStage+data.data.billAmount)));
                $("#minBill").text(milliFormat(((data.data.billStage+data.data.billAmount)/10).toFixed(2)));
                $("#billType").val(data.data.billType)
                sumBill =$("#sumBill").text();
                var billCreate = "";
                billCreate = $("#billCreate").val();
                if (billCreate == "未出账单"){
                    $("#title").text("未出账单页面");
                }else {
                    $("#title").text("已出账单页面");
                }
                if (data.data.billStatus==("已完成")){
                    $("#billStage").text("账单已完成");
                    $("#billRepay").text("账单已完成");
                }else {
                    var billStage = "";
                    var billRepay = "";
                    billStage = "<a href=\"#\">账单分期</a>"
                    $("#billid").val(data.data.billId);
                    billRepay = "<a href=/repayment/repayment?billid="+$("#billid").val()+">快速还款</a>"
                    $("#billStage").html(billStage);
                    $("#billRepay").html(billRepay);
                }
                if(sumBill == 0){
                    $("#billStage").text("本月无消费，无需分期");
                    $("#billRepay").text("本月无消费，无需还款");
                }else {
                    var billStage = "";
                    var billRepay = "";
                    billStage = "<a href=\"#\">账单分期</a>";
                    $("#billid").val(data.data.billId);
                    billRepay = "<a href=/repayment/repayment?billid="+$("#billid").val()+">快速还款</a>";
                    $("#billStage").html(billStage);
                    $("#billRepay").html(billRepay);
                }
                var type = $("#billType").val();
                if (type != "待操作"){
                    $("#billStage").text("账单已结算，无需分期");
                    $("#billRepay").text("账单已结算，无需还款");
                }else {
                    var billStage = "";
                    var billRepay = "";
                    billStage = "<a href=\"#\">账单分期</a>";
                    $("#billid").val(data.data.billId);
                    billRepay = "<a href=/repayment/repayment?billid="+$("#billid").val()+">快速还款</a>";
                    $("#billStage").html(billStage);
                    $("#billRepay").html(billRepay);
                }
            }
        })
    })

    //数字千位分隔符，可操作小数
    function milliFormat(num) {
        return num && num.toString()
            .replace(/\d+/, function(s){
                return s.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
            })
    }
</script>
</html>